<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/cw.css"/>
	</head>
        <style type="text/css">
        body{font-size:15px}
        	.div-first{padding:10px 10px 15px 10px;background: white;}
        	p{color:#333333 !important;}
        	.jiege{color: #8dc21f;}
        	.mui-input-row label{width: 30%;}
        	.mui-input-row label~input{width:70%;}
        	.mui-input-group{margin-top: 10px;margin-bottom: 10px;}
        	.mui-input-group:before,.mui-input-group:after,.mui-table-view:before{height: 0;}
        	.mui-table-view-cell:after,.mui-input-group .mui-input-row:after{left: 0;}
            .mui-btn-block{background: #8dc21f !important;text-align: center;line-height: 25px;border:none;border-radius:initial;margin-top: 30px;margin-bottom: 0;}
        	
        	.mui-radio input[type=radio]:checked:before {color:#8dc21f;}
	     	.mui-radio.mui-left input[type=radio]{left:0px;}
	    	.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{font-size:14px;position:relative;top:-5px;}
	        .nax .mui-radio.mui-left input[type=radio]{top: 13px!important;}
        	.mui-radio.mui-left label {padding-left: 20px;}
        	label span{color: red;font-size: 12px;}
        	/*弹窗*/
    	.zhifzzao{display:none;position:fixed;top:0;left: 0;right:0;bottom: 0;background:rgba(0,0,0,.5);z-index: 2;}
    	.zhiftc{display:none;font-size:15px;position:fixed;bottom: 10px;right: 0;left: 0;width:94%;left: 3%;z-index: 5;}
        .zhiftc .mui-table-view-cell{background:white;text-align: center;}
        .colorse{color:#8dc21f}
        .zhiftc .mui-table-view-cell:after{left: 0;}
        </style>
	<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<i class="mui-icon mui-icon-back mui-action-back"></i> 
		<h1 class="mui-title ">确认挂号</h1>
	</header> 
		<div class="mui-content" id="content">
		    <div class="div-first">
		    	<p><span>就诊时间</span><span class="mui-pull-right times"></span></p>
		    	<p><span>就诊科室</span><span class="mui-pull-right offices"></span></p>
		    	<p><span>预约医生</span><span class="mui-pull-right doctor"></span></p>
		    	<p><span>医生级别</span><span class="mui-pull-right level"></span></p>
		    </div>
	<form name="info">
	<ul class="mui-input-group mui-table-view">
		<li class="mui-input-row">
			<label>姓名<span>(必填)</span></label>
			<input type="text" name="name" class="mui-input-clear" placeholder="请输入姓名"/>
		</li>
		<li class="mui-input-row nax">
			<label>性别<span>(必选)</span></label>
			<!--<input type="text" class="mui-input-clear sex" value=""  placeholder="请输入性别"/>-->
			<div class="mui-radio mui-left mui-col-xs-3 mui-pull-left">
				<label>男</label>
				<input name="radio" type="radio" value="男" checked />
			</div>
			<div class="mui-radio mui-left mui-col-xs-3 mui-pull-left">
				<label>女</label>
				<input name="radio" type="radio" value="女" />
			</div>
		</li>
		<li class="mui-input-row ">
			<label>年龄 <span>(必填)</span></label>
			<input type="number" name="age" class="mui-input-clear" placeholder="请输入年龄"/>
		</li>
		<li class="mui-input-row ">
			<label>身份证<span>(选填)</span></label>
			<input type="number" name="idcard" class="mui-input-clear" placeholder="请输入身份证号"/>
		</li>
		<li class="mui-input-row ">
			<label>身高<span>(选填)</span></label>
			<input type="number" name="height" class="mui-input-clear" placeholder="请输入身高（cm）"/>
		</li>
		<li class="mui-input-row ">
			<label>体重<span>(选填)</span></label>
			<input type="number" name="weight" class="mui-input-clear" placeholder="请输入体重（kg）"/>
		</li>
		<li class="mui-input-row ">
			<label>手机<span>(必填)</span></label>
			<input type="number" name="phone" class="mui-input-clear" placeholder="请输入联系手机"/>
		</li>
		<li class="mui-input-row ">
			<label>地址<span>(选填)</span></label>
			<input type="text" name="address" class="mui-input-clear" placeholder="请输入联系地址"/>
		</li>
	</ul>
	</form>
	<ul class=" mui-table-view"> 
		<li class="mui-table-view-cell ">
			<span>挂号费</span><span class="jiege mui-pull-right registered"></span>
		</li>
	
		<li class="mui-table-view-cell ">
			<span>信息服务费</span><span class="jiege mui-pull-right info"></span>
		</li>
	
		<li class="mui-table-view-cell ">
			 <span>合计</span><span class="jiege mui-pull-right total"></span>
		</li>
	</ul>
	    <button type="button" class="mui-btn mui-btn-block">提交</button>
	</div>
	
<!--弹窗-->
	<div class="zhifzzao"></div>
	<div class="zhiftc">
		<div class="mui-table-view-cell" style="border-radius: 5px 5px 0 0;">
			选择支付方式
		</div>
		<div class="mui-table-view-cell colorse cols weixin">
			微信支付
		</div>
		<div class="mui-table-view-cell colorse cols alipay">
			支付宝支付
		</div>
		<div class="mui-table-view-cell colorse cols UnionPay">
			银联支付
		</div>
		<div class="mui-table-view-cell colorse cols" style="border-radius: 0 0 5px 5px;">
			余额支付
		</div>
		<div class="mui-table-view-cell cols" style="margin-top: 5px;border-radius: 5px;color:#AAAAAA">
			取消
		</div>
	</div>
		
	</body>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="../js/public.js" ></script>
    	<script type="text/javascript" src="../js/app/pay.js" ></script>
		<script type="text/javascript" src="../js/app/yuyuegh-queren.js" ></script>
		<!--<script src="../js/global.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			mui.init();
			//关闭弹出框
			$('.cols').on('tap',function(){
		    	$('.zhifzzao').fadeOut(500);
		    	$('.zhiftc').slideUp();
		    });
		</script>

</html>